<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="js/sockjs.min.js"></script>
    <script src="js/stomp.js"></script>
</head>
<body>
<div>
    <button id="connect">连接</button>
    <button id="disconnect" disabled="disabled">断开</button>
</div>
<div>
    <h3>广播形式</h3>
    <button id="broadcastButton">发送</button><input id="broadcastText" type="text">
    <label>广播消息：</label><input id="broadcastMsg" type="text" disabled="disabled">
</div>
<div>
    <h3>订阅形式</h3>
    <label>订阅消息：</label><input id="subscribeMsg" type="text" disabled="disabled">
</div>
<div>
    <h3>角色形式</h3>
    <button id="userButton">发送</button><input id="userText" type="text">
    <label>用户消息：</label><input id="userMsg" type="text" disabled="disabled">
</div>
<div>
    <h3>无APP</h3>
    <button id="appButton">发送</button><input id="appText" type="text">
    <label>前端消息：</label><input id="appMsg" type="text" disabled="disabled">
</div>
</body>
<script>
    var stomp = null;
    $("#connect").click(function () {
        var url = "http://localhost:8080/bonelf/noAuth/ws"
        var socket = new SockJS(url);
        stomp = Stomp.over(socket);
        //连接
        stomp.connect({}, function (frame) {
            //订阅广播
            stomp.subscribe("/bonelf/topic/broadcast", function (res) {
                $("#broadcastMsg").val(res.body);
            });
            //订阅，一般只有订阅的时候在返回
            stomp.subscribe("/bonelf/app/subscribe/1", function (res) {
                $("#subscribeMsg").val(res.body);
            });
            //用户模式
            stomp.subscribe("/bonelf/user/queue/one", function (res) {
                $("#userMsg").val(res.body);
            });
            //无APP
            stomp.subscribe("/bonelf/topic/app", function (res) {
                $("#appMsg").val(res.body);
            });
            setConnect(true);
        });
    });

    $("#disconnect").click(function () {
        if (stomp != null) {
            stomp.disconnect();
        }
        setConnect(false);
    });
    //设置按钮
    function setConnect(connectStatus) {
        $("#connect").attr("disabled", connectStatus);
        $("#disconnect").attr("disabled", !connectStatus);
    }

    //发送广播消息
    $("#broadcastButton").click(function () {
        stomp.send("/app/broadcast", {}, JSON.stringify({"body":$("#broadcastText").val()}))
    });

    //发送用户消息
    $("#userButton").click(function () {
        stomp.send("/app/one", {}, JSON.stringify({"body":$("#userText").val()}))
    });

    //发送web消息
    $("#appButton").click(function () {
        stomp.send("/topic/app", {}, JSON.stringify({"body":$("#appText").val()}))
    });
</script>
</html>